<template>
  <div>
    <Header title="音乐资讯"></Header>
    <MusicSwiper></MusicSwiper>
    <div class="tab-group">
      <div><div class="tab"><i class="recom_icon"></i></div><div class="tab-span">推荐</div></div>
      <div><div class="tab"><i class="MusicList_icon"></i></div><div class="tab-span" @click="$global.goPage({path:'/MoreMusicList', query:{title:'歌单'}})">歌单</div></div>
      <div><div class="tab"><i class="topList_icon"></i></div><div class="tab-span" @click="$global.goPage({path:'/MoreMusicList',query:{title:'榜单'}})">榜单</div></div>
      <div><div class="tab"><i class="artist_icon"></i></div><div class="tab-span" @click="$global.goPage('/ArtistIndex')">歌手</div></div>
    </div>
<MusicList :music-list="ListLimit" :more-detail="false"></MusicList>
    <Footer></Footer>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import Footer from "../../components/Footer";
import Header from "../../components/Header";
import MusicSwiper from "./Player/MusicSwiper";
import MusicList from "./Player/MusicList";
export default {
  name: "index",
  components: {MusicList, MusicSwiper, Header, Footer},
  data(){
    return{

    }
  },
  beforeCreate() {
    this.$store.dispatch('music/MusicList')

  },
  computed:{...mapState({
      MusicList:state=>state.music.MusicList,
  }),
    ListLimit:
      function() {
        return this.MusicList.slice(0,12)
      }
  },
  methods:{

  }
}
</script>

<style scoped lang="less">
.tab-group{
  display: flex;
  justify-content: space-around;
  .tab{
    background: #b3d4fc;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .tab-span{
    font-size: 24px;
    line-height: 48px;
    text-align: center;
  }
}
</style>
